﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - SpreadJS with React</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - SpreadJS with React"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n558","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="SpreadJS supports React - a JavaScript library that allows developers to build user interfaces for web applications and mobile applications by handling the view layer of the MVC framework." /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="bd3093d8-fe47-4f10-bff1-d4438599f71e"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="634a0351-9d0d-4a01-be54-29ccda776eb9"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="5"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="JavaScript Frameworks.html">JavaScript Frameworks</a>
 / SpreadJS with React</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->SpreadJS with React<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>SpreadJS supports React - a JavaScript library that allows developers to build user interfaces for web applications and mobile applications by handling the view layer of the MVC framework.</p>

<p>With React, you can modify data without reloading the page while creating reusable components and large applications.</p>

<p>SpreadJS can be used with React in the following two ways:</p>

<ol>
    <li><a href="#a">Using Node Package Manager</a></li>

    <li><a href="#b">Using Traditional HTML</a></li>
</ol>

<h3 id="a">Using Node Package Manager</h3>

<p>This method involves the following steps:</p>

<ol>
    <li>
        <strong>Create a React Project</strong>

        <p>Open the Command Prompt window and type the following commands:</p>

        <table>
            <tbody>
                <tr>
                    <td>npm install -g create-react-app<br />
                    create-react-app quick-start<br />
                    cd quick-start<br />
                    npm start</td>
                </tr>
            </tbody>
        </table>

        <p>After you finish, the react project will be created at the specified location in the directory. For more information on how to create a React project, refer to <a href="https://reactjs.org/docs/add-react-to-a-new-app.html">https://reactjs.org/docs/add-react-to-a-new-app.html</a></p>
    </li>

    <li>
        <strong>Install SpreadJS React module in project</strong>

        <p>Next, you need to install @grapecity/spread-sheets-react in your project using the following command:</p>

        <table>
            <tbody>
                <tr>
                    <td>npm install @grapecity/spread-sheets-react</td>
                </tr>
            </tbody>
        </table>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </li>

    <li>
        <strong>Import SpreadJS CSS into index.js file</strong>

        <p>Next, you need to import the SpreadJS CSS in your index.js file using the following code:</p>

        <table>
            <tbody>
                <tr>
                    <td>import <a href="mailto:'@grapecity/spread-sheets/styles/gc.spread.sheets.">'@grapecity/spread-sheets/styles/gc.spread.sheets.</a>excel2013white.css';</td>
                </tr>
            </tbody>
        </table>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </li>

    <li>
        <strong>Use SpreadJS in React application</strong>

        <p>Now, you can modify the App.js file as per your requirements. Changes will be reflected when the browser window is refreshed. As an example, you can use the sample code given below:</p>

        <div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
            <table class="i-syntax-table">
                <tbody>
                    <tr>
                        <th>JavaScript</th>

                        <th>
                            <div class="i-copy-code-wrapper">
                                <span class="i-copy-code">Copy Code</span>
                            </div>
                        </th>
                    </tr>

                    <tr>
                        <td class="i-code" colspan="2">
                            <p>import React, { Component } from 'react';<br />
                            import { SpreadSheets, Worksheet, Column } from <a href="mailto:'@grapecity/spread-sheets-react'">'@grapecity/spread-sheets-react'</a>;</p>

                            <p>import GC from <a href="mailto:'@grapecity/spread-sheets'">'@grapecity/spread-sheets'</a>;</p>

                            <p>var SpreadJSKey = "xxx";<br />
                            GC.Spread.Sheets.LicenseKey = SpreadJSKey;</p>

                            <p>class APP extends Component {<br />
                            constructor(props) {<br />
                            super(props);<br />
                            this.spreadBackColor = 'aliceblue';<br />
                            this.sheetName = 'Goods List';<br />
                            this.hostStyle =<br />
                            {<br />
                            width: '800px',<br />
                            height: '600px'<br />
                            };<br />
                            this.data = [{ Name: 'Apple', Category: 'Fruit', Price: 1, 'Shopping Place': 'Wal-Mart' },{ Name: 'Potato', Category: 'Fruit', Price: 2.01, 'Shopping Place': 'Other' },{ Name: 'Tomato', Category: 'Vegetable', Price: 3.21, 'Shopping Place': 'Other' },{ Name: 'Sandwich', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },{ Name: 'Hamburger', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },{ Name: 'Grape', Category: 'Fruit', Price: 4, 'Shopping Place': 'Sun Store' }<br />
                            ];<br />
                            this.columnWidth = 100;<br />
                            }<br />
                            render() {<br />
                            return (<br />
                            &lt;div&gt;<br />
                            &lt;SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle}&gt;<br />
                            &lt;Worksheet name={this.sheetName} dataSource={this.data}&gt;<br />
                            &lt;Column dataField='Name' width={300}&gt;&lt;/Column&gt;<br />
                            &lt;Column dataField='Category' width={this.columnWidth}&gt;&lt;/Column&gt;<br />
                            &lt;Column dataField='Price' width={this.columnWidth}<br />
                            formatter="$#.00"&gt;&lt;/Column&gt;<br />
                            &lt;Column dataField='Shopping Place' width={this.columnWidth}&gt;&lt;/Column&gt;<br />
                            &lt;/Worksheet&gt;<br />
                            &lt;/SpreadSheets&gt;<br />
                            &lt;/div&gt;<br />
                            )<br />
                            }<br />
                            }<br />
                            export default APP&nbsp;</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <p class="InnovaContentWidget" contenteditable="false" style="BORDER-TOP: white 2px solid; MARGIN-TOP: 2px; BORDER-BOTTOM: white 1px solid" data-widget-layout="block" data-source-widget-type="Language Filtered Code Box" data-widget-type="Language Filtered Code Box"></p>
    </li>
</ol>

<h3 id="a">Using Traditional HTML</h3>

<p>This method involves the following steps:</p>

<ol>
    <li>
        <strong>Download the React HTML template</strong>

        <p>You can download the react HTML template using the link <a href="https://reactjs.org/docs/try-react.html">https://reactjs.org/docs/try-react.html</a></p>
    </li>

    <li>
        <strong>Add SpreadJS and React - SpreadJS to HTML template</strong>

        <p>Add references to&nbsp;the <strong>gc.spread.sheets.all.*.*.*.min.js,&nbsp; gc.SpreadJS.*.*.*.css and&nbsp;gc.spread.sheets.react.*.*.*.js</strong>&nbsp;files in the HTML template (i.e. your&nbsp;index.html file).</p>
    </li>

    <li>
        <strong>Use SpreadJS in React application</strong>

        <p>Now, you can use SpreadJS in your react application. As an example, you can use the sample code given below:</p>

        <div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
            <table class="i-syntax-table">
                <tbody>
                    <tr>
                        <th>JavaScript</th>

                        <th>
                            <div class="i-copy-code-wrapper">
                                <span class="i-copy-code">Copy Code</span>
                            </div>
                        </th>
                    </tr>

                    <tr>
                        <td class="i-code" colspan="2">
                            &lt;!DOCTYPE html&gt;<br />
                            &lt;html&gt;<br />
                            &lt;head&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp; &lt;meta charset="UTF-8" /&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;Hello World&lt;/title&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp; &lt;script src="<a href="https://unpkg.com/react@16/umd/react.development.js%22%3E%3C/script">https://unpkg.com/react@16/umd/react.development.js"&gt;&lt;/script</a>&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp; &lt;script src="<a href="https://unpkg.com/react-dom@16/umd/react-dom.development.js%22%3E%3C/script">https://unpkg.com/react-dom@16/umd/react-dom.development.js"&gt;&lt;/script</a>&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp; &lt;script src="<a href="https://unpkg.com/babel-standalone@6.15.0/babel.min.js%22%3E%3C/script">https://unpkg.com/babel-standalone@6.15.0/babel.min.js"&gt;&lt;/script</a>&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp; &lt;script src="./lib/gc.spread.sheets.all.*.*.*.min.js"&gt;&lt;/script&gt;<br />
                            &nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" type="text/css" href="./lib/gc.spread.sheets.excel2013white.*.*.*.min.css"&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp; &lt;script src="./lib/gc.spread.sheets.react.*.*.*.js"&gt;&lt;/script&gt;<br />
                            &lt;/head&gt;<br />
                            &lt;body&gt;<br />
                            &lt;div id="root"&gt;&lt;/div&gt;<br />
                            &lt;script type="text/babel"&gt;<br />
                            const {SpreadSheets, Worksheet, Column} = window.SpreadSheetsComponents;<br />
                            class App extends React.Component{<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;render(){<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style={{width: '800px',height: '600px'}}&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;SpreadSheets&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Worksheet name='first'&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Column dataField="Name"/&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/Worksheet&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/SpreadSheets&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; )<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />
                            &nbsp;&nbsp;&nbsp;&nbsp; }<br />
                            &nbsp;&nbsp;&nbsp;&nbsp; ReactDOM.render(<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;App/&gt;,<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementById('root')<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; );

                            <p>&lt;/script&gt;<br />
                            &lt;/body&gt;<br />
                            &lt;/html&gt;&nbsp;</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <p class="InnovaContentWidget" contenteditable="false" style="BORDER-TOP: white 2px solid; MARGIN-TOP: 2px; BORDER-BOTTOM: white 1px solid" data-widget-layout="block" data-source-widget-type="Language Filtered Code Box" data-widget-type="Language Filtered Code Box"></p>
    </li>
</ol>

<p>The SpreadSheets, Worksheet, and Column are the basic elements with tag hierarchy. Other elements work by setting them. The main tag hierarchy is:</p>

<table>
    <tbody>
        <tr>
            <td>&lt;SpreadSheets&gt;<br />
            &nbsp; &lt;Worksheet&gt;<br />
            &nbsp;&nbsp;&nbsp; &lt;Column&gt;&lt;/Column&gt;<br />
            &nbsp;&nbsp;&nbsp; ...<br />
            &nbsp; &lt;/Worksheet&gt;<br />
            &nbsp; ...<br />
            &lt;/SpreadSheets&gt;</td>
        </tr>
    </tbody>
</table>

<p>The following topics list the element directives.</p>

<ul>
    <li><a href="UsingtheSpreadSheetsElement.html">Using the SpreadSheets Element</a></li>

    <li><a href="UsingtheWorksheetElement.html">Using the Worksheet Element</a></li>

    <li><a href="UsingtheColumnElement.html">Using the Column Element</a></li>

    <li><a href="UsingtheChartElement.html" data-auto-update-caption="true">Chart Element</a></li>

    <li><a href="UsingtheExcelIOElement.html" data-auto-update-caption="true">Excel IO Element</a></li>

    <li><a href="UsingtheShapeElement.html" data-auto-update-caption="true">Shape Element</a></li>
</ul><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
